<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
    >
      <el-form-item
        label="设备名称"
        prop="equipmentName"
      >
        <el-input
          v-model="queryParams.equipmentName"
          placeholder="请输入设备名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索</el-button>
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
        >重置</el-button>
      </el-form-item>
    </el-form>
    <el-button
      type="primary"
      style="float:right; margin-bottom: 20px;"
      @click="handleAdd"
    >新增设备</el-button>
    <el-table
      v-loading="loading"
      :data="deviceList"
    >
      <el-table-column
        label="序号"
        type="index"
        width="50"
      />
      <el-table-column
        label="设备图片"
        width="100"
        align="center"
      >
        <template #default="{row}">
          <el-image
            style="width: 100px; max-height: 200px;"
            :src="handleSrc(row)"
            :preview-src-list="[uploadFileUrl + `/biz/file/get?fileId=${row.fileId}&modelKey=original`]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        label="租赁物设备名称"
        align="center"
        prop="equipmentName"
        :show-overflow-tooltip="true"
        min-width="150"
      />
      <el-table-column
        label="所属分类"
        align="center"
        prop="equipmentType"
        :show-overflow-tooltip="true"
        min-width="150"
      />
      <el-table-column
        label="规格型号"
        align="center"
        prop="equipmentModel"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="厂商"
        align="center"
        prop="company"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="单位"
        align="center"
        prop="unit"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="指导价（万元）"
        align="center"
        prop="price"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          {{ formatReceiveAmount(scope.row.price / 10000) }}
        </template>  
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >编辑
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="handleQuery"
    />

    <DeviceCreate ref="deviceCreateRef" @clickChange="handleCircle"></DeviceCreate>
  </div>
</template>

<script>
import { listEquimpent, delEquimpent } from '@/api/deviceCatalog'
import DeviceCreate from './modules/DeviceCreate.vue'
import { formatMoney } from '@/utils/utils';

export default {
  name: "deviceManagement",
  components: { DeviceCreate },
  data() {
    var validatePositiveNumberWithDecimal = (rule, value, callback) => {
      if (value === null || value === '' || isNaN(value)) {
        // 如果输入为空、null或无法转换为数字，则视为有效（因为是非必填项）
        callback();
      } else if (value <= 0) {
        // 如果输入的数字小于等于0，则给出错误提示
        callback(new Error('请输入大于0的数字'));
      } else {
        // 检查小数点后的位数
        const decimalPart = value.toString().split('.')[1];
        if (decimalPart && decimalPart.length > 6) {
          // 如果小数点后位数超过6位，则给出错误提示
          callback(new Error('小数点后最多6位'));
        } else {
          // 输入有效
          callback();
        }
      }
    };

    return {
      uploadFileUrl: process.env.VUE_APP_BASE_API,
      // 遮罩层
      // loading: true,
      loading: false,
      // 总条数
      total: 0,
      // 设备表格数据
      deviceList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 新增编辑弹窗
      dialogLoading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        equipmentName: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        equipmentName: [
          { required: true, message: '设备名称不能为空', trigger: 'blur' }
        ],
        equipmentType: [
          { required: true, message: '设备分类不能为空', trigger: 'change' }
        ],
        unit: [
          { required: true, message: '单位不能为空', trigger: 'blur' }
        ],
        equipmentModel: [
          { required: true, message: '规格型号不能为空', trigger: 'blur' }
        ],
        price: [
          // { validator: validateNumber, trigger: 'blur' },
          { validator: validatePositiveNumberWithDecimal, trigger: 'blur' },
        ],
      },
      // 设备分类类别管理
      deviceTypeLoading: false,
      deviceTypeOpen: false,
      // 设备分类类别管理表单参数
      deviceTypeForm: {},
      // // 设备分类下拉框选项
      // equipmentTypeOptions: [],
      // 设备分类表格数据、设备分类下拉框选项
      deviceTypeList: [],

      ruleForm: {
        hrefn: require("../../assets/images/space.png")
      },
      pic_accept: ".jpg,.png,.jpeg,.bmp",
      pic_maxsize: 10,//单位MB
    }
  },
  created() {
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleSrc(row) {
      return this.uploadFileUrl + `/biz/file/get?fileId=${row.fileId}&modelKey=middle`
    },
    formatReceiveAmount(amount) {
      return formatMoney(amount);
    },
    getList() {
      this.loading = true
      listEquimpent(this.queryParams).then(response => {
        this.deviceList = response.rows;
        this.total = response.total;
      }).finally(() => {
        this.loading = false
      })
    },

    handleCircle() {
      this.handleQuery()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.$refs.deviceCreateRef.sync(null)
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$refs.deviceCreateRef.sync(row)
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal.confirm('是否确认删除该数据项？').then(function () {
        return delEquimpent(row.id)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
  }
}
</script>

<style scoped lang="scss">
</style>
